<template>
  <div style="width: 100%; height: 100vh; /* 占满视口高度 */">
    <div
      style="
        float: left;
        width: 170px;
        background-color: rgb(28, 35, 52);
        display: flex;
        flex-direction: column;
        height: 1000px;
      "
    >
      <div style="background-color: rgb(20, 26, 38); margin: 10px 10px">
        <img :src="img.img" alt="" />
        <span style="color: white">米花呼叫中心</span>
      </div>
      <ul class="left-ul">
        <li>
          <router-link to="/Provice">
            <img :src="img.MyHomeImg" alt="" /><span>首页</span></router-link
          >
        </li>
        <li><img :src="img.MyText" alt="" /><span>企业管理</span></li>
        <li><img :src="img.MyEchart" alt="" /><span>通话统计</span></li>
        <li>
          <router-link :to="{ name: 'Permission' }"
            ><img :src="img.MyCount" alt="" /><span>权限管理</span></router-link
          >
        </li>
        <li><img :src="img.MyComputer" alt="" /><span>系统配置</span></li>
        <li><img :src="img.MyCount" alt="" /><span>权限配置</span></li>
      </ul>
    </div>
    <div
      style="
        float: left;
        background-color: rgb(247, 247, 247);
        height: 100%;
        width: 1280px;
        border-top: 1px solid rgb(235, 235, 236);
        border-bottom: 1px solid rgb(235, 235, 236);
      "
    >
      <div style="height: 1000px; background-color: rgb(255, 255, 255)">
        <div
          style="
            height: 50px;
            border-top: 1px solid rgb(235, 235, 236);
            border-bottom: 1px solid rgb(235, 235, 236);
          "
        >
          <div
            style="
              float: left;
              width: 50px;
              height: 50px;
              border-right: 1px solid rgb(235, 235, 236);
            "
          >
            <img :src="img.Aonther" alt="" class="right-img" />
          </div>
          <div
            style="
              float: right;

              height: 50px;
              width: 200px;
            "
          >
            <div style="padding: 13px 0px 0px 45px">
              <img :src="img.My" alt="" style="position: relative; top: 4px" />
              <span style="font-size: 11px;">{{ Userdata }}</span>
            </div>
          </div>
        </div>
        <router-view> </router-view>
      </div>
    </div>
  </div>
</template>
<script>
//其他设置
import Aonther from "@/assets/设置.png";
// 图片
import img from "@/assets/微信图片_20250701092935.png";
//个人中心
import My from "@/assets/个人中心.png";
//首页图片
import MyHomeImg from "@/assets/首页.png";
//企业管理
import MyText from "@/assets/企业管理 - 副本.png";
//通话统计
import MyEchart from "@/assets/通话统计@2x.png";
///系统配置
import MyComputer from "@/assets/权限管理.png";
//权限管理
import MyCount from "@/assets/权限管理j.png";
//首页
export default {
  data() {
    return {
      Userdata: "",
      img: {
        img,
        MyHomeImg,
        MyText,
        MyCount,
        MyEchart,
        MyComputer,
        My,
        Aonther,
      },
    };
  },
  mounted() {
    var a = JSON.parse(localStorage.getItem("LoginArr"));

    this.Userdata = a.name;
    if (this.$route.path !== "/HomepageSon") {
      this.$router.push("/HomepageSon");
    }
  },
};
</script>
<style>
* {
  margin: 0px;
  padding: 0px;
}

.right-ul {
  height: 50px;
}
img {
  height: 20px;
  padding: 0px 10px 0px 0px;
}
.left-ul li {
  list-style: none;
  margin: 30px 17px;
}
.left-ul li span {
  color: white;
  font-size: 15px;
}
.left-ul li i {
  float: left;
  padding: 0px 10px 0px 0px;
}
.left-ul li a.router-link-exact-active span {
  color: rgb(86, 152, 220);
}
.right-img {
  padding: 15px 15px;
}
/* 假设最外层是 .app 或 body */
body,
html {
  width: 100%; /* 占满浏览器宽度 */
  height: 100%; /* 占满浏览器高度（可选，用于全屏布局） */
  margin: 0; /* 清除默认边距 */
  padding: 0; /* 清除默认内边距 */
}
</style>